<template>
<div class="ratings" ref="ratings">
	<div class="ratings-content">
		<div class="overview flex">
			<div class="overview-left">
				<h1 class="score">{{seller.score}}</h1>
				<div class="title">综合评分</div>
				<div class="rank">高于周边商家{{seller.rankRate}}%</div>
			</div>
			<div class="overview-right cell-main">
				<div class="score-wrapper">
					<span class="title">服务态度</span>
					<star :size="48" :score="seller.serviceScore"></star>
					<span class="score">{{seller.serviceScore}}</span>
				</div>
				<div class="score-wrapper">
					<span class="title">商品评价</span>
					<star :size="48" :score="seller.foodScore"></star>
					<span class="score">{{seller.foodScore}}</span>
				</div>
				<div class="score-wrapper">
					<span class="title">送达时间</span>
					<span class="score">{{seller.deliveryTime}} 分钟</span>
				</div>
			</div>
		</div>
		<split></split>
		<ratingselect @select="selectRating" @toggle="toggleContent" :selectType="selectType" :onlyContent="onlyContent" :ratings="ratings"></ratingselect>
		<div class="rating-wrapper">
			<ul>
				<li class="rating-it flex" v-for="rating in ratings" v-show="needShow(rating.rateType,rating.text)">
					<img :src="rating.avatar" class="avatar">
				<div class="cell-main">
              <h1 class="name">{{rating.username}}</h1>
					<div class="star-wrapper">
						<star :score="rating.score"></star>
						<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟
						</span>
					</div>
					<p class="text">{{rating.text}}</p>
					<div class="recommend" v-show="rating.recommend&&rating.recommend.length">
						<i class="iconfont icon-zan"></i>
						<span class="item" v-for="item in rating.recommend">{{item}}</span>
					</div>
					<div class="time">{{rating.rateTime|formatDate}}</div></div>
				</li>
			</ul>
		</div>
	</div>
</div>
</template>

<script type="ecmascript-6">
import star from '../star/star';
import split from '../split/split';
import ratingselect from '../ratingselect/ratingselect';
import BScroll from 'better-scroll';
import {formatDate} from '../js/date';
  const ERR_OK = 0;
  const ALL=2;
export default{
	props:{
		seller:{
			type:Object
		}
	},
	created(){
		this.$http.get('/api/ratings').then((response)=>{
			if(response.data.errno===ERR_OK){
				this.ratings=response.data.data;
				this.$nextTick(()=>{
					this.scroll=new BScroll(this.$refs.ratings,{
						click:true
					})

				})
			}
		})
	},
  data(){ 
  	return{
  		ratings:[],
  		selectType:ALL,
  		onlyContent:true
  	} },
  	methods:{
  		needShow(type,text){
  			if(this.onlyContent&&!text){
  				return false;
  			}
  			if (this.selectType===ALL) {
  				return true;
  			}else{
  				return type===this.selectType;
  			}
  		},
  		selectRating(type){
  			this.selectType=type;
  			this.$nextTick(()=>{
  				this.scroll.refresh();
  			})
  		},
  		toggleContent(){
  			this.onlyContent=!this.onlyContent;
  			this.$nextTick(()=>{
  				this.scroll.refresh();
  			})
  		}
  	},
  	filters:{
  		formatDate(time){
  			let date=new Date(time);
  			return formatDate(date,'yyyy-MM-dd hh:mm')
  		}
  	},
  components:{star,split,ratingselect}
}
</script>

<style rel="stylesheet" lang="less">
   .ratings{
   	position: absolute;
   	top: 8.85rem;
   	bottom: 0;
   	width: 100%;
   	overflow: hidden;
   	.overview{
   		padding: 0.9rem 0;
   	}
   	.overview-left{
   		flex:0 0 6.35rem;
   		padding: 0.3rem 0;
   		border-right: 1px solid rgba(7,17,27,0.1);
   		text-align: center;
   		.score{
   			margin-bottom: 0.3rem;
   			line-height: 1.4rem;
   			font-size: 24px;
   			color: #f90;
   		}
   		.title{
   			margin-bottom: 0.4rem;
   			line-height: 0.6rem;
   			font-size: 0.6rem;
   			color: #07111b;
   		}
   		.rank{
   			line-height: 0.5rem;
   			font-size: 10px;
   			color: #93999f;
   		}
   	}
   	.overview-right{
   		padding: 0.3rem 0 0.3rem 1.2rem;
   		.score-wrapper{
   			margin-bottom: 0.4rem;
   			font-size: 0;
   		}
   		.title{
   			display: inline-block;
   			line-height: 0.9rem;
   			vertical-align: top;
   			font-size: 0.6rem;
   			color: #07111b;
   		}
   		.star{
   			display: inline-block;
   			margin: 0 0.6rem;
   			vertical-align: top;
   		}
   		.star-item{
   			width: 0.75rem;
   			height: 0.75rem;
   			    margin-right: 5px;
   		}
   		.score{
   			display: inline-block;
   			line-height: 0.9rem;
   			vertical-align: top;
   			font-size: 12px;
   			color: #f90;
   		}
   	}
   } 
   .rating-wrapper{
   	padding: 0 0.9rem;
   	.rating-it{
   		margin: 0.9rem 0;
   		padding: 0;
   		position: relative;
   	}
   	   		.time{
   			position: absolute;
   			top: 0;
   			right: 0;
   			line-height: 0.6rem;
   			font-size: 10px;
   			color: #93999f;
   		}
   	.avatar{
   		flex:0 0 1.4rem;
   		margin-right: 0.6rem;
   		border-radius: 50%;
      width: 0.9rem;
      height: 0.9rem;
   	}
   	.name{
	margin-bottom: 0.2rem;
	line-height: 0.6rem;
	font-size: 10px;
	color: #07111b;
   	}
   	.star-wrapper{
   		margin-bottom: 0.3rem;
   		font-size: 0;
   	}
   	.star{
   		display: inline-block;
   		margin-right: 0.3rem;
   		vertical-align: top;
   	}
   	.star-item{
   		width: 10px;
   		height: 10px;
   		margin-right: 3px;
   	}
   	.delivery{
   		display: inline-block;
   		vertical-align: top;
   		line-height: 12px;
   		font-size: 10px;
   		color: #93999f;
   	}
   	.text{
   		margin-bottom: 0.4rem;
   		line-height: 0.9rem;
   		color: #07111b;
   		font-size: 12px; 
   		}
   		.recommend{
   			line-height: 0.8rem;
   			font-size: 0;
   		}
   		.icon-zan{
   			color:#00a0dc;
   			display: inline-block;
   			margin-bottom: 0 0.4rem 0.2rem 0;
   			font-size: 9px;
   		}
   		.item{
   			display: inline-block;
   			margin: 0 0.4rem 0.2rem 0;
   			font-size: 9px;
   			padding: 0 0.3rem;
   			border:1px solid rgba(7,17,27,0.1);
   			border-radius: 0.05rem;
   			color: #93999f;
   		}
   		
   }
</style>